<template>
	<div
		class="toolbar px-[20px] h-[50px] text-lg rounded-b-[10px] bg-[#1B2538] flex items-center justify-between">
		<div class="flex gap-2 text-t-3 text-[16px]">
			<n-tooltip v-if="isPC()" trigger="hover" :y="200">
				<template #trigger>
					<div
						class="h-8 w-8 flex items-center justify-center cursor-pointer"
						@click="handleFullScreen">
						<base-icon name="fullscreen" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('casinoPre.fullscreen') }}</div>
			</n-tooltip>
			<n-tooltip v-if="isPC()" trigger="hover">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer" @click="handleMovie">
						<base-icon :class="isSelected ? 'text-t-1' : ''" name="widescreen" />
					</div>
				</template>
				<div class="px-4 py-2">
					{{ isSelected ? $t('casinoPre.closeMovie') : $t('casinoPre.openMovie') }}
				</div>
			</n-tooltip>
			<!-- <n-tooltip v-if="isPC()" trigger="hover">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon :class="isSelected ? 'text-t-1' : ''" name="window" />
					</div>
				</template>
				<div class="px-4 py-2">
					{{ isSelected ? $t('casinoPre.openPictureinp') : $t('casinoPre.openPictureinp') }}
				</div>
			</n-tooltip> -->
			<n-tooltip v-if="isPC()" trigger="hover">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon :class="isSelected ? 'text-t-1' : ''" name="statistics2" />
					</div>
				</template>
				<div class="px-4 py-2">
					{{ isSelected ? $t('casinoPre.closeStatistics') : $t('casinoPre.openStatistics') }}
				</div>
			</n-tooltip>
			<!-- <n-tooltip trigger="hover" :y="200">
				<template #trigger>
					<div
						class="h-8 w-8 flex items-center justify-center cursor-pointer"
						@click="handleCollect">
						<base-icon name="statistics" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('slotspre.back') }}</div>
			</n-tooltip>
			<n-tooltip v-if="isPC()" trigger="hover" :y="200">
				<template #trigger>
					<div
						class="h-8 w-8 flex items-center justify-center cursor-pointer"
						@click="handleCollect">
						<base-icon name="window" />
					</div>
				</template>
				<div class="px-4 py-2">{{ $t('slotspre.back') }}</div>
			</n-tooltip> -->
			<n-tooltip v-if="isPC()" trigger="hover" :y="200">
				<template #trigger>
					<div
						class="h-8 w-8 flex items-center justify-center cursor-pointer"
						@click="handleCollect">
						<base-icon :name="gameDetails?.favourited ? 'love-filled' : 'love'" />
					</div>
				</template>
				<div class="px-4 py-2">
					{{ gameDetails?.favourited ? $t('casinoPre.favGameCancel') : $t('casinoPre.favGame') }}
				</div>
			</n-tooltip>
			<n-tooltip trigger="click" placement="top-start" :show-arrow="true">
				<template #trigger>
					<div class="h-8 w-8 flex items-center justify-center cursor-pointer">
						<base-icon :size="16" name="setup" />
					</div>
				</template>
				<div class="p-5 w-[220px] bg-[#2A364F] rounded-sm">
					<div class="h-[24px] flex justify-between items-center">
						<div class="text-[#fff]">
							<base-icon :size="20" name="rocket" />
							<span class="ml-[2px]">{{ $t('miniGames.rocket') }}</span>
						</div>
						<n-switch :disabled="isRuning" v-model:value="rocket" :on-update:value="changeRocket" />
					</div>
					<div class="h-[20px]"></div>
					<div class="h-[24px] flex justify-between items-center">
						<div class="text-[#fff]">
							<base-icon :size="20" name="max" />
							<span class="ml-[2px]">{{ $t('miniGames.maxBet') }}</span>
						</div>
						<n-switch :disabled="isRuning" v-model:value="maxBet" :on-update:value="changeMaxBet" />
					</div>
					<div class="h-[20px]"></div>
					<div class="h-[24px] flex justify-between items-center">
						<div class="text-[#fff]">
							<base-icon :size="20" name="mute" />
							<span class="ml-[2px]">{{ $t('miniGames.mute') }}</span>
						</div>
						<n-switch :disabled="isRuning" v-model:value="mute" :on-update:value="changeMute" />
					</div>
				</div>
			</n-tooltip>
		</div>

		<!-- <base-image src="slots/logo.svg" type="local"></base-image> -->
		<div class="cursor-pointer" @click="handleProvably">
			<span class="text-sm text-t-3 mr-1">{{ $t('miniGames.provably') }}</span>
			<base-image src="game/vector.svg" type="local"></base-image>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { BaseIcon, BaseImage } from '@/components/base'
import { NTooltip, NSwitch } from 'naive-ui'
import { isPC, showSuccess, showError, t } from '@/utils'
import { favouriteAdd, favouriteRemove } from '@/api/other.ts'
import { eventBus } from '@/views/games/eventBus'
import { useGameDetailStore } from '@/store'

const isSelected = ref(false)
const gameDetailStore = useGameDetailStore()
const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: ''
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	rocket: {
		type: Boolean,
		default: false
	},
	maxBet: {
		type: Boolean,
		default: false
	},
	mute: {
		type: Boolean,
		default: false
	}
})
const rocket = ref(props.rocket)
const maxBet = ref(props.maxBet)
const gameDetails = ref<any>(gameDetailStore?.currentGameDetails)
const mute = ref(props.mute)
const emits = defineEmits([
	'fullScreen',
	'toMovie',
	'collect',
	'showProvably',
	'changeRocket',
	'changeMaxBet',
	'changeMute'
])
watch(
	() => gameDetailStore.currentGameDetails,
	(val) => {
		gameDetails.value = val
	}
)
// const isCollected = computed(() => {
// 	if (props.type === 'casino') {
// 		return props.data.favoriteState
// 	} else {
// 		return props.data.collectState
// 	}
// })
const changeRocket = (val: boolean) => {
	rocket.value = val
	eventBus.emit('changeRocket', val)
}

const changeMaxBet = (val: boolean) => {
	maxBet.value = val
	eventBus.emit('changeMaxBet', val)
}

const changeMute = (val: boolean) => {
	mute.value = val

	eventBus.emit('changeMute', val)
}
const handleFullScreen = () => {
	emits('fullScreen')
}

const handleMovie = () => {
	isSelected.value = !isSelected.value
	emits('toMovie', isSelected.value)
}

const handleCollect = async () => {
	let params = {
		gameId: gameDetails.value.id
	}
	gameDetails.value.favourited = !gameDetails.value.favourited
	try {
		gameDetails.value.favourited ? await favouriteAdd(params) : await favouriteRemove(params)
		showSuccess(
			t(gameDetails.value.favourited ? 'casinoPre.favGameAdded' : 'casinoPre.favGameRemoved')
		)
	} catch (err: any) {
		showError(err.msg)
	}
}
const handleProvably = () => {
	emits('showProvably')
}
</script>
<style lang="scss" scoped>
.toolbar {
	background-image: url('@/assets/img/slots/logo-whiteRb0.5.svg');
	background-repeat: no-repeat;
	background-position: center 40%;
	background-size: 60px 38px;
}
</style>
